<template>
  <div class="app-container">
    <van-nav-bar title="订场" left-arrow @click-left="$router.push('/home')" />
    <div class="content-box">
      <div class="filter-box">
        <!-- <el-select class="branch-select" v-model="form.branch">
          <el-option v-for="(item, index) in branchList" :key="index" :label="item" :value="item" />
        </el-select> -->
        <div class="type-box">
          <div class="type-item" :class="form.type == item.label && 'active'" v-for="(item, index) in typeList"
            :key="index" @click="handleTypeChange(item)">
            {{ item.label }}
          </div>
        </div>
      </div>
      <div class="list-box" v-loading="dataLoading">
        <div class="list-content" v-if="listItemList.length">
          <div class="list-item" v-for="(item, index) in listItemList" :key="index" @click="toDetail(item)">
            <div class="item-cover">
              <img class="cover-img" :src="item.imageUrl">
            </div>
            <div class="item-label-box">
              <div class="item-label">{{ item.name }}</div>
              <div class="item-tip">{{ item.location }}</div>
            </div>
          </div>
        </div>
        <div class="empty" v-else>暂无数据</div>
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/api/bookingManger/index.js';
import * as dictApi from '@/api/system/dict/data.js';
import dayjs from 'dayjs';

export default {
  name: 'BookingIndex',
  data() {
    return {
      dataLoading: false,
      form: { branch: '越秀', type: '羽毛球场地' },
      branchList: ['天河', '番禺', '白云', '越秀', '海珠', '荔湾', '黄埔', '增城', '花都', '南沙', '其他'],
      typeList: [],
      listItemList: [
        { label: '越秀区羽毛球馆', num: '10', cover: 'item_cover.png' },
        { label: '越秀区羽毛球馆', num: '10', cover: 'item_cover.png' },
        { label: '越秀区羽毛球馆', num: '10', cover: 'item_cover.png' },
        { label: '越秀区羽毛球馆', num: '10', cover: 'item_cover.png' },
      ],
    };
  },
  created() {
    this.getData();
  },
  methods: {
    async getData() {
      this.dataLoading = true;
      const res = await api.getBookFieldList({ ...this.form });
      this.listItemList = res.rows;
      const { data: dictData } = await dictApi.getDicts('book_field_type');
      this.typeList = dictData.map((dict) => {
        return { label: dict.dictLabel, value: dict.dictValue };
      });
      this.dataLoading = false;
    },
    handleTypeChange(item) {
      this.form.type = item.value;
      this.getData();
    },
    toDetail(item) {
      this.$router.push({ name: 'BookingDetail', query: { id: item.id } });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mixin.scss';

.content-box {
  width: calc(100% - 30px);
  height: calc(100% - 70px);
  padding: 10px 15px;
  display: flex;
  flex-direction: column;
}

@include list-box-style;

.filter-box {
  margin-bottom: 10px;
  display: flex;
  align-items: center;

  .branch-select {
    width: 80px;
    ::v-deep .el-input__inner {
      background-color: transparent;
      border: none;
    }
  }

  .type-box {
    flex: 1;
    display: flex;
    justify-content: space-evenly;
    align-items: center;

    .type-item {
      padding: 2px 0;
      color: #3d3d3d4c;

      &.active {
        color: #565656;
      }
    }
  }
}
</style>
